4.14. Список для развития
Список для развития
И именно это ваша практика. Раз уж вы познали целую кучу информации, почему бы не создать что-то своё, проверить и развить свои навыки, сформировав портфолио.
Внимание: я составил список не для выбора. Если вы хотите действительно украсить своё портфолио, оно нужно вам не для оригинальности или уникальности (плевать, Что такие проекты есть у многих), главное именно показать, что вы умеете с этим работать. А как научиться, если не поработать? А чтобы поработать, нужно создать, ведь на работу сразу без опыта никто не возьмёт!
Хотите список? Давайте сделаем, но только сформулируем задачу хаотично и с намёками, чтобы вам пришлось проанализировать, подумать, структурировать и спроектировать.
А попробуйте реализовать следующий список пет-проектов:
Калькулятор на HTML/CSS/JS
Если вы выполняли практические задания в этих главах, то вы уже его реализовали - можете «причесать» и отправлять в свой репозиторий! Описание: Простой калькулятор с кнопками и отображением результата.
Навыки: DOM-работа, события, интерфейсы.
Стек: HTML, CSS, JavaScript
Список дел (To-Do List)
Самый популярный и лёгкий тип пет-проекта.
Описание: Приложение для добавления и удаления задач. Создайте список задач, логику добавления задач в список, удаления их из списка, возможность создавать элементы по кнопке и ввода текста. Список можно хранить в localStorage, а элементы группировать в список <li>.
Навыки: Работа с массивами, localStorage, обработка событий.
Стек: HTML, CSS, JavaScript
Таймер обратного отсчёта
Описание: Таймер, который запускается по клику и считает секунды до нуля. К примеру, начальным временем будет 60 секунд, функция будет уменьшать таймер на 1, обновлять текст на экране, и если таймер == 0, то останавливать таймер, выводя «Время вышло!». Можно добавить кнопку «Запустить» для повторения логики.
Навыки: Работа с setInterval, обновление DOM.
Стек: HTML, CSS, JavaScript
Программа «Загадай число» на Python
Описание: Компьютер загадывает число, пользователь угадывает. Здесь нужно использовать рандомизацию, установив переменную равной случайному числу от 1 до 100, и дать пользователю ввести число. Если число больше загаданного, то выводить «Меньше», аналогично «Больше» и если оно совпадёт, выводить «Победа!».
Навыки: Условия, циклы, ввод/вывод.
Стек: Python
Конвертер валют (локальный)
Описание: Ввод суммы и вывод эквивалента в другой валюте (курс можно задать статически). Установить начальный курс, к примеру, 75,55, затем дать возможность ввести сумму (число с плавающей запятой), а при нажатии на кнопку «Конвертировать» перевода умножать эту сумму из поля ввода на курс доллара, а результат выводить на экран.
Важно либо добавить проверку поля ввода на число, либо перевод в число.
Навыки: Формы, вычисления, работа с числами.
Стек: HTML, CSS, JavaScript
Интерактивная анкета
Описание: Форма с полями ввода и кнопкой «Отправить», которая выводит результат на странице. При нажатии на кнопку получаем значение всех полей формы, очищаем блок вывода и для каждого поля создаётся строка «Имя поля: значение». Можете поэкспериментировать с содержанием и реализацией.
Навыки: Работа с формами, обработка событий.
Стек: HTML, CSS, JavaScript
Приложение «Генератор паролей»
Описание: Генерирует случайный пароль по длине и типам символов. Можно создать переменную цифры «0123456789», спецсимволы «!@#$%^&*» и буквы «abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ». При генерации выбрать случайные символы из выбранных наборов, перемешать их и вернуть как строку.
Навыки: Случайные числа, строки, условия.
Стек: Python / JS
Базовый конвертер температур
Описание: Перевод градусов Цельсия в Фаренгейты и наоборот. При выборе направления перевода Цельсий в Фаренгейт, результат = (температура * 9/5) + 32, а если Фаренгейт в Цельсий, то результат = (температура - 32) * 5/9. Разумеется, результат выводить.
Навыки: Формы, вычисления, события.
Стек: HTML, CSS, JavaScript
Угадай цвет (RGB)
Описание: Пользователь видит цвет и должен выбрать правильное его имя из нескольких вариантов. Создать цвета = [{ hex: "#FF0000", name: "красный" }, { hex: "#00FF00", name: "зелёный" }, { hex: "#0000FF", name: "синий" }], выбирать один из списка, записывать в переменную, и при загрузке страницы устанавливать фон как эту переменную. Создайте кнопки, и если при клике на кнопку будет совпадение с «name» этой переменной, то вывести «Правильно!». Это аналогия угадывания числа, но здесь рандомизация будет касаться именно одного из трёх цветов, и взаимодействие будет не через ввод текста, а через кнопки.
Навыки: Работа с цветом, условия, события.
Стек: HTML, CSS, JavaScript
Мини-игра: Камень-ножницы-бумага
Описание: Игрок выбирает вариант, компьютер случайно отвечает. Можно создать массив с вариантами «камень», «ножницы», «бумага», затем компьютер будет делать случайный выбор из вариантов, а игрок вводить (или нажимать на кнопку, как угодно), если результаты равны то вывод «Ничья!», если побеждает компьютер «Вы проиграли!», а если игрок «Вы победили!».
Навыки: Условия, случайность, логика.
Стек: Python / JS
Веб-приложение «Погода» с API
Описание: Отображение погоды по городу через OpenWeatherMap API. При нажатии на кнопку «Показать погоду», нужно получить название города из поля ввода, отправить GET-запрос к API, дождаться ответа, распарсить JSON-ответ, извлечь температуру, описание погоды, значок и отобразить информацию на странице.
Навыки: Fetch, JSON, работа с API.
Стек: HTML, CSS, JS + Fetch API
Форма регистрации с валидацией
Описание: Полноценная форма с проверкой email, пароля, подтверждением. При нажатии на кнопку «Зарегистрироваться» получить email, пароль, подтверждение пароля, и если email не содержит «@», то показать ошибку «Некорректный email!». Если пароль короче 6 символов, показать ошибку «Пароль слишком короткий!», если пароль не равен подтверждению, то показать ошибку «Пароли не совпадают!», иначе «Регистрация успешна.
Навыки: Валидация, события, сообщения об ошибках.
Стек: HTML, CSS, JavaScript
REST API на Flask (Python)
Описание: Создание простого API для заметок (GET, POST, DELETE). Импортируйте Flask и jsonify, создайте список заметок, и для метода GET возвращайте список через jsonify, для POST получайте данные из запроса и добавляйте в список, затем возвращайте статус 201 Created, а для DELETE по <id>, удаляйте заметку.
Внимание - API мы рассматриваем подробно позднее, так что может быть, вам стоит вернуться к этой задаче позже.
Навыки: HTTP, маршруты, JSON.
Стек: Python + Flask
Чат-бот на Python
Описание: Бот в консоли, реагирующий на команды. Можете сделать просто - если пользователь вводит «Привет» или «привет», то печатать «Бот: Привет!». Если напечатает «как дела?», то «Бот: Нормально, а у тебя?» и всё в таком стиле. Можно это всё упаковать в цикл пока true, иначе напечатать «Бот: Не понял» для обработки неизвестных выражений. Поэкспериментируйте.
Навыки: Обработка ввода, условия, функции.
Стек: Python
Мобильное приложение (на C# .NET MAUI)
Описание: Простое приложение под Android/iOS, например, калькулятор. Создайте интерфейс с текстовым полем, кнопками 0-9, +, -, =. При нажатии на кнопку проверять, если цифра, то добавлять к текущему числу, если операция, то сохранять число и операцию, если равно то выполнять операцию и обновлять экран.
Можете конечно попробовать и реализовать это на Kotlin/Java.
Навыки: UI, события, кроссплатформенная разработка.
Стек: C#, .NET MAUI
ASP.NET Core Web App
Описание: Базовое веб-приложение с несколькими страницами. Создайте HomeController, в котором добавьте действия Index(), About(), Contact(). Для каждой страницы создайте файл в Views/Home/ и т.д.
В Startup.cs или Program.cs настроить маршруты, к примеру:
"/" → HomeController.Index()
"/about" → HomeController.About()
Поэкспериментируйте.
Навыки: MVC, Razor, маршруты.
Стек: C#, ASP.NET Core
CRUD-приложение с SQLite
Описание: Добавление, редактирование, удаление записей в БД SQLite. Создайте таблицу, к примеру Tasks, с id, title и description. Сделайте функции create_task(title, description), read_tasks() для SELECT, update_task(id, new_title, new_description) для UPDATE и delete_task(id) для DELETE.
Навыки: SQL, ORM (например, SQLAlchemy), CRUD.
Стек: Python + SQLite
REST API с авторизацией
Описание: API с JWT-токенами для входа и защищёнными маршрутами. Создайте страницу с вводом email и пароля, добавьте валидацию и проверку в базе данных на наличие таких данных. Если правильные, то создавать JWT-токен и возвращать его, иначе возвращать ошибку «Неверные данные». Создайте также страницу с профилем, которая будет требовать токен из заголовка запроса, будет проверять его валидность, иначе возвращать ошибку 401 Unauthorized.
Навыки: Авторизация, токены, безопасность.
Стек: Python (FastAPI/Flask), Node.js, Java (Spring Boot)
Форма с отправкой данных на сервер
Описание: HTML-форма, данные передаются на бэкенд и сохраняются в файл или БД. На клиенте нужно добавить форму с кнопкой отправки POST-запроса на сервер. На сервере же получить данные, сохранить в БД или файл, и вернуть ответ «Спасибо, ваша заявка принята!».
Навыки: POST-запросы, обработка данных, сохранение.
Стек: HTML, JS + PHP / Python / Java
Веб-приложение «Заметки» с сохранением в localStorage
Описание: Сохраняет заметки в браузере. Если localStorage содержит заметки, то загрузить их, иначе создавать пустой список. При добавлении новой заметки, добавлять её в список и сохранять в localStorage. При удалении удалять из списка и перезаписывать localStorage, а при загрузке отображать все заметки.
Навыки: localStorage, формы, списки.
Стек: HTML, CSS, JS
Погодное приложение с сохранением истории
Описание: История запросов сохраняется в localStorage или БД. При загрузке страницы, если есть история в localStorage, отображать её, иначе пустой список. При нажатии на кнопку «Показать погоду», получать город из поля ввода, отправлять запрос к API, получать температуру и описание, добавлять запись в историю и обновлять localStorage, отображая историю на странице.
Навыки: LocalStorage, API, шаблонизация.
Стек: JS + OpenWeatherMap
REST API с MongoDB
Описание: Хранение данных в NoSQL (MongoDB), CRUD-операции. Здесь точно понадобятся знания API, поэтому можете сюда вернуться позже. Нужно сделать маршруты для методов GET, POST, PUT, DELETE. GET получает все элементы и возвращает JSON. POST получает данные из тела запроса, добавляет в коллекцию и возвращает 201. PUT ищет элемент по Id, как и DELETE. Усложняется всё тем, что добавляется MongoDB. Можете реализовать её и на других языках, поэкспериментируйте, главное понять как работает MongoDB и «пощупать» её.
Навыки: MongoDB, Mongoose, Express.
Стек: Node.js + MongoDB / Python + PyMongo
Парсер CSV/JSON/XML
Описание: Загрузка файла и отображение данных в таблице. При выборе файла пользователем, читать содержимое, определить тип файла (CSV, JSON, XML), распарсить его - CSV по строкам и запятым, JSON преобразуйте в объект, XML через парсер. Итоговые данные нужно отобразить в структурированной таблице.
Навыки: Чтение файлов, парсинг, отображение.
Стек: Python / JS / Java
Блог на Flask/Django
Описание: Простой блог с возможностью добавления статей. Маршрут первый отображает список статей из БД, второй маршрут используется для добавления (POST для получения заголовка и текста статьи). Можно использовать шаблонизаторы. Также хорошим вариантом будет реализовать блог на ASP.NET.
Навыки: Шаблоны, маршруты, БД.
Стек: Python + Flask / Django
Локальная CRM система
Описание: Управление клиентами, поиск, фильтрация. Как можно понять, то на сервере нужна будет таблица с клиентами (id, name, email, phone), маршруты GET, POST, PUT, DELETE, а на клиенте отображаться таблица клиентов, возможность добавить через специальную форму. Можно добавить поиск с фильтрацией клиентов по имени или email.
Навыки: CRUD, таблицы, формы.
Стек: HTML, JS + Python (Flask) / PHP / Java (Spring)
Консольный менеджер задач
Описание: Программа, которая позволяет добавлять, удалять и просматривать задачи. По сути, это аналог ToDoList, однако нужно будет реализовать возможность загрузки задач из файла, сохранение их в файл и меню с командами добавления, удаления, просмотра. Можно также сделать и на C#. Навыки: ООП, файловая система, CLI.
Стек: Java / Python
Веб-приложение «Книги» с поиском
Описание: Поиск книг по названию, автору, жанру. На сервере нужно создать список книг с полями (название, автор, жанр), создать маршрут /search с параметрами запроса, добавить фильтрацию книг по любому совпадению в полях. На клиенте при вводе запроса отправлять GET-запрос на /search?query=..., получать результаты и отображать их в виде списка.
Навыки: Формы, фильтрация, отображение.
Стек: JS + HTML/CSS / Python + Flask
REST API с документацией (Swagger/OpenAPI)
Описание: API с автоматически генерируемой документацией. Определите модели данных (например, User, Product), добавьте маршруты GET (вернуть список пользователей) и POST (принять объект и добавить в базу). Документирование для GET должно возвращать массив User, для POST принимать User и возвращать созданного пользователя.
Здесь лучше использовать Swagger, настроить его интерфейс, указать описания, примеры, типы данных и сделать доступным по адресу /docs.
Навыки: Swagger, REST, документирование.
Стек: Python (FastAPI/Swagger), Spring Boot, ASP.NET
Аутентификация с использованием OAuth (локально)
Описание: Реализация аутентификации через Google/Facebook (локально, через mock). Нужно будет имитировать редирект на Google, получить mock токен, проверить его подлинность, создать сессию пользователя и перенаправить на главную. На главной, если сессия активна, то показать приветствие, иначе показать кнопку «Войти через Google». Добавьте также маршрут для выхода, чтобы удалять сессию и перенаправляться на главную.
Навыки: OAuth, сессии, безопасность.
Стек: Python / Node.js / Java
Веб-приложение «Фильмы» с поиском по базе
Описание: Поиск фильмов по базе данных (SQLite или PostgreSQL). На сервере создайте таблицу для фильмов (id, title, genre, year, rating), выполняйте поиск через SQL-запрос, возвращайте JSON-результат. На клиенте нужна форма с полями (название, жанр, год), и при отправке GET-запроса отображать результаты в виде карточек.
Навыки: SQL, ORM, поиск, фильтрация.
Стек: Python + Flask / Java + Spring Boot